Ember.js টেমপ্লেট রেন্ডারিংয়ের জন্য Handlebars ব্যবহার করে। Handlebars একটি ওপেন-সোর্স টেমপ্লেট ইঞ্জিন, যা HTML এবং ডেটার মধ্যে সম্পর্ক তৈরি করে। Handlebars ব্যবহার করে আপনি ডাইনামিক HTML তৈরি করতে পারেন যা ডেটা মডেলের উপর ভিত্তি করে রেন্ডার হবে।
Ember.js-এর টেমপ্লেট ফাইলগুলিতে Handlebars ব্যবহার করা হয়, এবং এই টেমপ্লেটগুলি .hbs এক্সটেনশন সহ সংরক্ষিত থাকে। Handlebars সিনট্যাক্স Ember.js-এ টেমপ্লেট রেন্ডারিং এবং ডেটা বাউন্ডিংকে সহজ করে তোলে।
Handlebars Syntax এর মূল উপাদান
১. Mustache Syntax (Handlebars Expression)
Handlebars টেমপ্লেটে mustache syntax ({{}}) ব্যবহার করা হয় ডেটা বাউন্ডিং এবং এক্সপ্রেশন রেন্ডার করার জন্য।
<h1>{{model.title}}</h1>
এখানে, model.title অ্যাপ্লিকেশনের মডেল থেকে ডেটা এনে হেডিং হিসাবে রেন্ডার হবে।
২. এপ্লিকেশন মডেল থেকে ডেটা রেন্ডার করা
Ember.js অ্যাপ্লিকেশনের মডেল থেকে ডেটা টেমপ্লেটে রেন্ডার করতে {{model.property}} সিনট্যাক্স ব্যবহার করা হয়:
<h1>{{model.title}}</h1>
<p>{{model.description}}</p>
এখানে, model হল অ্যাপ্লিকেশনের মডেল, এবং title, description হল মডেল প্রপার্টি।
৩. Conditionals: {{#if}} এবং {{#unless}}
Handlebars এ শর্তযুক্ত লজিক ব্যবহার করতে {{#if}} এবং {{#unless}} ব্লক হেল্পার্স ব্যবহার করা হয়।
{{#if}}: যদি শর্ত সত্য হয় তবে ব্লক রেন্ডার হবে।{{#unless}}: যদি শর্ত মিথ্যা হয় তবে ব্লক রেন্ডার হবে।
{{#if model.isPublished}}
<p>This post is published.</p>
{{else}}
<p>This post is not published yet.</p>
{{/if}}
এখানে, যদি model.isPublished সত্য হয় তবে "This post is published." মেসেজটি দেখাবে, না হলে "This post is not published yet." দেখাবে।
৪. Loops: {{#each}}
{{#each}} ব্লক হেল্পার ব্যবহার করে অ্যারে বা লিস্টের মধ্যে লুপ চালানো যায়।
<ul>
{{#each model.posts as |post|}}
<li>{{post.title}}</li>
{{/each}}
</ul>
এখানে, model.posts হল একটি অ্যারে এবং এই লুপটি প্রতিটি পোস্টের title প্রপার্টি রেন্ডার করবে।
৫. উপাদানগুলোকে কন্ডিশনাল ক্লাস বা অ্যাট্রিবিউট দিয়ে রেন্ডার করা
Handlebars সিনট্যাক্সের সাহায্যে কন্ডিশনাল স্টাইল বা ক্লাস অ্যাট্রিবিউট যোগ করা যায়।
<button class="{{if model.isPublished 'published' 'draft'}}">
{{#if model.isPublished}}Published{{else}}Draft{{/if}}
</button>
এখানে, যদি model.isPublished সত্য হয়, তাহলে বাটনে "published" ক্লাস অ্যাড করা হবে, এবং টেক্সট হবে "Published"। অন্যথায় "draft" ক্লাস অ্যাড হবে এবং টেক্সট হবে "Draft"।
৬. অপারেটর ব্যবহার: {{#each}} + {{#if}}
একটি অ্যারে বা অবজেক্টের মধ্যে কন্ডিশনাল লজিক ব্যবহার করার জন্য Handlebars খুব সহজ সিনট্যাক্স সরবরাহ করে।
<ul>
{{#each model.posts as |post|}}
{{#if post.isPublished}}
<li>{{post.title}} - Published</li>
{{else}}
<li>{{post.title}} - Draft</li>
{{/if}}
{{/each}}
</ul>
এখানে, প্রতিটি পোস্টের isPublished প্রপার্টি চেক করা হয় এবং তার ভিত্তিতে "Published" বা "Draft" টেক্সট দেখানো হয়।
৭. ব্লক হেল্পার্স: {{#link-to}}
Ember.js-এ রাউটিং ব্যবস্থাপনার জন্য {{#link-to}} ব্লক হেল্পার ব্যবহার করা হয়। এটি রাউটের মধ্যে নেভিগেশন তৈরি করতে সাহায্য করে।
{{#link-to 'post' model.id}}View Post{{/link-to}}
এখানে, model.id এর মাধ্যমে রাউটের URL তৈরি করা হয় এবং ব্যবহারকারীকে নির্দিষ্ট পোস্টের পেজে নিয়ে যাওয়া হয়।
৮. এক্সপ্রেশন: {{#with}}
{{#with}} ব্লক হেল্পার ব্যবহার করে আপনি কোন ডেটা বা অবজেক্টকে স্থানীয়ভাবে ব্যবহার করতে পারেন।
{{#with model.author as |author|}}
<h2>{{author.name}}</h2>
<p>{{author.bio}}</p>
{{/with}}
এখানে, model.author এর তথ্য author হিসেবে স্থানীয়ভাবে ব্যবহার করা হচ্ছে, যাতে আপনি ডেটা রেন্ডার করার সময় সরাসরি প্রপার্টি অ্যাক্সেস করতে পারেন।
Ember.js Handlebars এর বিশেষ বৈশিষ্ট্য
- ডেটা বাউন্ডিং: Ember.js-এ {{}} সিনট্যাক্স দিয়ে মডেল এবং ভিউ-এর মধ্যে ডেটা সিঙ্ক্রোনাইজ করা সহজ।
- শর্তযুক্ত লজিক: {{#if}}, {{#unless}} এবং {{#each}} ব্লক হেল্পার্সের মাধ্যমে শর্তযুক্ত লজিক এবং লুপিং সহজভাবে পরিচালনা করা যায়।
- কম্পোনেন্ট ব্যবহারের সহজতা: Handlebars কম্পোনেন্ট ভিত্তিক ডিজাইন সমর্থন করে, যা পুনঃব্যবহারযোগ্য UI উপাদান তৈরি করতে সাহায্য করে।
- রাউটিং এবং নেভিগেশন: {{#link-to}} হেল্পার ব্যবহার করে অ্যাপ্লিকেশনের মধ্যে সহজে রাউটিং এবং নেভিগেশন তৈরি করা যায়।
Ember.js Handlebars Syntax অ্যাপ্লিকেশন ডেভেলপমেন্টে একটি গুরুত্বপূর্ণ ভূমিকা পালন করে। এটি HTML এবং ডেটার মধ্যে সম্পর্ক স্থাপন করতে সাহায্য করে এবং সহজে ডাইনামিক UI তৈরি করতে পারে। Handlebars এর সাহায্যে অ্যাপ্লিকেশনের টেমপ্লেট রেন্ডারিং, শর্তযুক্ত লজিক, লুপিং এবং নেভিগেশন খুবই সহজ হয়ে ওঠে।
Read more
